<template>
<div class="bi-bg">
  <div class="bi-head">
    <div class="flex px-10px w-30">
      <div class="bi-head-button w-100px h-40px" :style="{background:tab==='总览'?'#a2b4f6':'transparent'}" @click="tab='总览'">总览</div>
      <div class="bi-head-button w-100px h-40px" :style="{background:tab==='生产'?'#a2b4f6':'transparent'}" @click="tab='生产'">生产</div>
      <div class="bi-head-button w-100px h-40px" :style="{background:tab==='设备'?'#a2b4f6':'transparent'}" @click="tab='设备'">设备</div>
      <div class="bi-head-button w-100px h-40px" :style="{background:tab==='仓储'?'#a2b4f6':'transparent'}" @click="tab='仓储'">仓储</div>
      <div class="bi-head-button w-100px h-40px" :style="{background:tab==='质量'?'#a2b4f6':'transparent'}" @click="tab='质量'">质量</div>
    </div>
    <div class="flex center w-40">
      <div class="bi-head-title">华茂经营大屏</div>
    </div>
    <div class="flex center px-10px w-30">
      <span class="bi-head-menu mr-auto">{{clock}}</span>
      <Icon type="md-qr-scanner" size="24" class="bi-head-menu m-10px" @click="fullScreen"/>
    </div>
  </div>
  <pg-total v-if="tab==='总览'"></pg-total>
  </div>
</template>

<script>
import screenFull from 'screenfull';
import pgTotal from './tabs/pg-total.vue';
export default {
  name:'',
  components: { pgTotal},
  data() {
    return {
      clock:null,
      tab:'总览',
    }
  },
  props: {
    config:{
      default:()=>{
        return {
        }
      }
    }
  },
  watch: {},
  computed: {
    
  },
  created() {},
  mounted() {
    this.setClock();
  },
  methods: {
    setClock(){
      setInterval(() =>{
        this.clock= this.tools.dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
      },1000);
    },
    fullScreen(){
      screenFull.request(this.$el);
    },
  }
};
</script>
<style scoped>
.bi-bg {
  position: relative;
  width: 100%;
  height:100%;
  z-index: 0;
  background-color: #0f172a;
  /* background-color: #0e1627; */
  /*  background-image: url("./dashboard.png"); */
}
.bi-head {
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:6vh;
  border-image-source: linear-gradient(90deg,transparent 0%,transparent 10%, #98acf4 50%, transparent 90%, transparent 100%);
  border-image-slice: 1;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}
.bi-head-title {
  display: flex;
  color:white;
  padding: 0 10px;
  font-size: 4vh;
  font-family:Gill Sans;
  text-overflow: ellipsis;
  margin-left: auto;
  margin-right: auto;
  
}
.bi-head-button {
  border:1px solid #98acf4;
  display: flex;
  justify-content: center;
  align-items: center;
  color:white;
  margin: 0 3px;
  border-radius: 4px;
  box-shadow: 3px 0 3px #a2b4f6;
  text-overflow: ellipsis;
  transform: skew(-20deg);
  cursor: default;
}
.bi-head-menu {
  color:white;
  font-size: 24px;
}
.blue-glass {
  /* display: none; */
  width: 400px;
  height: 200px;
  position: absolute;
  background-color: rgba(100, 149, 237, 0.5); /* 半透明的蓝色背景 */
  backdrop-filter: blur(5px); /* 应用模糊效果 */
  border-radius: 10px; /* 圆角边框 */
  padding: 20px; /* 内边距 */
  color:white;
  font-size: 20px;
}
.blue-side {
  /* display: none; */
  width: 250px;
  height: 300px;
  background-color: rgba(100, 149, 237, 0.5); /* 半透明的蓝色背景 */
  border-radius: 10px; /* 圆角边框 */
  padding: 20px; /* 内边距 */
  color:white;
  font-size: 20px;
}
.left-side {
  position: absolute;
  left: 0px;
  top:0px;
  justify-content: space-between;
  padding:20px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.right-side {
  position: absolute;
  right: 0px;
  top:0px;
  justify-content: space-between;
  padding:20px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 4s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>